<template>
	<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" status-icon>
		<el-form-item label="原密码" prop="password">
			<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="新密码" prop="newPassword">
			<el-input type="password" v-model="form.newPassword" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="确认密码" prop="checkPassword">
			<el-input type="password" v-model="form.checkPassword" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" :loading="loading" @click="submit">提 交</el-button>
		</el-form-item>
	</el-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { editPassword } from '/@/api/upms/sysuser';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { ElMessage } from 'element-plus';
import { logout } from '/@/api/login/index';
export default defineComponent({
	props: {
		userId: {
			type: String,
			default: () => '',
		},
	},
	emits: ['upSuccess'],
	setup(props, { emit }) {
		const stores = useUserInfo();
		const { userInfos } = storeToRefs(stores);
		const formRef = ref();
		const validatePass = (rule: any, value: any, callback: any) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (data.form.checkPassword !== '') {
					if (!formRef.value) return;
					formRef.value.validateField('checkPassword', () => null);
				}
				callback();
			}
		};
		const validatePass2 = (rule: any, value: any, callback: any) => {
			if (value === '') {
				callback(new Error('请输入确认密码'));
			} else if (value !== data.form.newPassword) {
				callback(new Error('新密码与确认密码不一致'));
			} else {
				callback();
			}
		};
		const data = reactive({
			form: {
				id: props.userId,
				password: '',
				checkPassword: '',
				newPassword: '',
			},
			rules: {
				newPassword: [{ validator: validatePass, trigger: 'blur' }],
				checkPassword: [{ validator: validatePass2, trigger: 'blur' }],
				password: [
					{
						required: true,
						message: '请输入原密码',
						trigger: 'blur',
					},
				],
			},
			loading: false,
		});
		const submit = () => {
			formRef.value.validate((valid: any) => {
				if (valid) {
					data.loading = true;
					editPassword(data.form)
						.then((res) => {
							ElMessage.success('提交成功');
							data.loading = false;
							resetForm();
							emit('upSuccess');
							// 重新登录
							if (userInfos.id == props.userId) {
								logout().then((response: any) => {
									// 清除缓存/token等
									Session.clear();
									// 使用 reload 时，不需要调用 resetRoute() 重置路由
									window.location.reload();
								});
							}
						})
						.catch(() => {
							data.loading = false;
						});
				}
			});
		};
		const resetForm = () => {
			formRef.value.resetFields();
		};

		return {
			formRef,
			submit,
			...toRefs(data),
		};
	},
});
</script>
